<template>
  <a-modal title="关联商品" :visible="currentVisible" width="700px" :footer="null"
             @cancel="currentVisible = false">
    <a-table bordered :pagination="false" :columns="productColumns" :data-source="productList"
              :rowKey="(record, index) => index">
        <span class="product" slot="product" slot-scope="text, record, index">
          <img class="img" v-if="record.image" :src="record.image" alt="">
          <img class="img" v-else src="https://picttype1.jnby.com/community/goods/pl-goods.png" alt="" />
          <div class="product-name"><template v-if="record.brandName">【{{record.brandName}}】</template>{{record.productName}}</div>
        </span>
    </a-table>
  </a-modal>
</template>

<script>
const productColumns = [
    {
      title: '序号',
      width: '1',
      align: 'center',
      customRender: (text, record, index) => `${index + 1}`
    },
    {
      title: '商品',
      width: '10',
      align: 'center',
      scopedSlots: { customRender: 'product' }
    },
    {
      title: '款号',
      width: '4',
      align: 'center',
      dataIndex: 'productNo'
    },
    {
      title: '年份',
      width: '3',
      align: 'center',
      dataIndex: 'year'
    },
    {
      title: '波段',
      width: '3',
      align: 'center',
      dataIndex: 'band'
    },
    {
      title: '季节',
      width: '3',
      align: 'center',
      dataIndex: 'season'
    }
  ]
  export default {
    data() {
      return {
        productColumns
      }
    },
    components: {
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      productList: {
        type: Array,
        default: []
      },
    },
    computed: {
      currentVisible: {
        get() {
          return this.visible
        },
        set(val) {
          this.$emit('update:visible', val)
        }
      }
    },
    filters: {
    },
    created() {
    },
    methods: {
    }
  }
</script>

<style lang="less" scoped>
  .product {
    display: flex;
    align-items: center;
    overflow: hidden;
    .img {
      display: block;
      margin: 0 2px;
      width: 60px;
      height: 60px;
      border: 1px dashed #f5f5f5;
      object-fit: scale-down;
      cursor: pointer;
    }
    .product-name {
      flex: 1;
      margin-left: 5px;
      width: 80px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      word-break: break-all; /* 追加这一行代码 */
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
    }
  }
</style>
